<template>
	<view class="content">
		<view>
			<view class="cu-bar bg-white margin-top">
				<view class="action">图片上传</view>
				<view class="action">{{ imgList.length }}/4</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length < 4"><text class="cuIcon-cameraadd"></text></view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">标题</view>
				<input placeholder="清晰明确的标题更吸引人哦" :value="product.goods_name" @input="inputChange" data-name="goods_name" />
			</view>

			<view class="cu-form-group">
				<view class="title">收费</view>
				<input placeholder="服务收费" type="digit" :value="product.price" @input="inputChange" data-name="price" />
			</view>

			<view class="cu-form-group">
				<view class="title">原价</view>
				<input placeholder="原价" type="digit" :value="product.origin_price" @input="inputChange" data-name="origin_price" />
			</view>

			<view class="cu-form-group">
				<view class="title">分类</view>
				<input @click="toggleCateMask('show')" placeholder="请选择分类" disabled :value="tags.join(',')" @input="inputChange" data-name="tags" />
			</view>

			<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
			<view class="cu-form-group margin-top">
				<textarea
					maxlength="-1"
					placeholder="请填写您的收费标准、服务内容、服务流程、服务保障等。详细的服务介绍可以吸引更多客户下单。"
					:disabled="modalName != null"
					@input="inputChange"
					data-name="content" :value="product.content"
					>{{ product.content }}</textarea
				>
			</view>

			<view class="box margin-top-20" style=" padding: 20upx;">
				<button @click="postForm" class="cu-btn block bg-blue margin-tb-sm lg">
					<text :class="loadding == 1 ? 'cuIcon-loading2 cuIconfont-spin' : 'cuIconfont-spin'"></text>
					提交
				</button>
			</view>
		</view>
		<!-- 选择分类 -->
		<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" @click="toggleCateMask">
			<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in cateList" :key="item.id">
						<view class="cate-item b-b two">{{ item.category_name }}</view>
						<!-- <view v-for="tItem in item.tags" :key="tItem.id" class="cate-item b-b" :class="{ active: inArray(tItem.name, tags) > -1 }" @click="changeCate(tItem)">
							{{ tItem.name }}
						</view> -->
						<view class="padding-sm flex flex-wrap bg-white">
						<view  class="padding-xs" v-for="(tag, index2) in item.tags"   :key="index2" >
							<view class="cu-tag" :class="{ ' bg-green': inArray(tag.name, tags) > -1 }" @click="changeCate(tag)" >{{ tag.name }}</view>
						</view>
					</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<style lang="scss">
/* 分类 */
.cate-mask {
	position: fixed;
	left: 0;
	top: var(--window-top);
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	z-index: 95;
	transition: 0.3s;

	.cate-content {
		width: 630upx;
		height: 100%;
		background: #fff;
		float: right;
		transform: translateX(100%);
		transition: 0.3s;
	}
	&.none {
		display: none;
	}
	&.show {
		background: rgba(0, 0, 0, 0.4);

		.cate-content {
			transform: translateX(0);
		}
	}
}
.cate-list {
	display: flex;
	flex-direction: column;
	height: 100%;
	.cate-item {
		display: flex;
		align-items: center;
		height: 90upx;
		padding-left: 30upx;
		font-size: 28upx;
		color: #555;
		position: relative;
	}
	.two {
		height: 64upx;
		color: #303133;
		font-size: 30upx;
		background: #f8f8f8;
	}
	.active {
		color: $base-color;
	}
}
</style>
<script>
import beeApp from '../../beeApp.js';

export default {
	data() {
		return {
			cateMaskState: 0, //分类面板展开状态
			modalName: null,
			imgList: [],
			loadding: 0,
			product: {},
			pics: [],
			cateList: [],
			tags: [],
			content: '',
			id:0,
		};
	},
	onLoad(option) {
		// beeApp.alert("yiqwyei");
		if (option.id) {
			this.id = option.id;
			this.loadData();
		}
		this.loadCateList();
	},
	methods: {
		//加载分类
		loadCateList() {
			var that = this;
			beeApp.api(
				'/mall/tag/getCategory',
				{
					shop_id: 328
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.cateList = res.data;
				}
			);
		},
		//显示分类面板
		toggleCateMask(type) {
			let timer = type === 'show' ? 10 : 300;
			let state = type === 'show' ? 1 : 0;
			this.cateMaskState = 2;
			setTimeout(() => {
				this.cateMaskState = state;
			}, timer);
		},
		//分类点击
		changeCate(item) {
			var name = item.name;
			// this.toggleCateMask();
			var index = this.inArray(name, this.tags);
			if (index > -1) {
				this.tags.splice(index, 1);
			} else {
				this.tags.push(name);
			}
		},
		inArray(search, array) {
			// var index = -1;
			for (var i in array) {
				if (array[i] == search) {
					return i;
				}
			}
			return -1;
		},

		loadData() {
			var that = this;
			beeApp.api(
				'mall/goods/find',
				{
					id: this.id
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					that.product = res.data;
					var pics = that.product.imglist;
					var imgList = [];
					for (var i in pics) {
						imgList.push(pics[i]['file_url']+"?imageView2/1/w/360/h/360");
					}
					that.pics = pics;
					that.imgList = imgList;
					that.tags = that.product.tags_text;
				}
			);
		},
		ChooseImage() {
			uni.chooseImage({
				count: 4, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// sourceType: ['album'], //从相册选择
				success: res => {
					for (let i in res.tempFilePaths) {
						beeApp.upload(res.tempFilePaths[i], uploadRes => {
							this.imgList.push(res.tempFilePaths[i]);
							this.pics.push({
								name: uploadRes.key,
								file_url: 'https://img.bestsmartbee.com/' + uploadRes.key
							});
						});
					}
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这张图片吗？',
				cancelText: '再看看',
				confirmText: '再见',
				success: res => {
					if (res.confirm) {
						var index = e.currentTarget.dataset.index;
						this.imgList.splice(index, 1);
						this.pics.splice(index, 1);
					}
				}
			});
		},
		inputChange(e) {
			// console.log(e);
			var name = e.currentTarget.dataset.name;
			// var product = this.product
			this.product[name] = e.detail.value;
			// this.product = product
		},
		stopPrevent(){
			
		},
		postForm: function() {
			// console.log(this.pics);

			var that = this;
			if (that.loadding == 1) {
				return;
			}

			if (!this.product.goods_name) {
				beeApp.alert('请输入标题');
				return;
			}
			if (!this.product.price) {
				beeApp.alert('请输入服务价格');
				return;
			}
			if (!this.product.content) {
				beeApp.alert('请输入服务介绍');
				return;
			}
			if(this.tags.length==0){
				beeApp.alert('请选择类目');
				return;
			}
			that.loadding = 1;

			beeApp.api(
				'mall/goods/add',
				{
					goods_name: this.product.goods_name,
					content: this.product.content,
					price: this.product.price,
					imgs: JSON.stringify(this.pics),
					shop_id: 328,
					tags:this.tags,
					origin_price: this.product.origin_price,
					method: 'POST',
					id : this.id,
				},
				function(res) {
					that.loadding = 0;
					if (res.code != 200) {
						beeApp.alert(res.msg);
						return;
					}
					beeApp.alert('恭喜您，服务发布成功', function() {
						beeApp.setPageData('pages/product/list', { reload: 1 });
						uni.navigateBack();
						// uni.navigateTo({
						// 	url:'/pages/user/topics'
						// })
					});
				}
			);
		}
	}
};
</script>
